<template>
  <section>
    <van-nav-bar
      title="订单详情"
      fixed
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <van-icon name="arrow-left" slot="left" color="#333" size="0.6rem" />
      <van-icon
        :name="require('@/assets/img/computer.png')"
        slot="right"
        color="#333"
        size="0.6rem"
      />
    </van-nav-bar>
    <div
      class="container"
      v-if="detailData"
      :class="{ isbottom: detailData.logisticsNodeName == '已取消' }"
    >
      <div class="sub">
        <div class="title">
          <div class="title-left">
            <span>{{ detailData.senderProvince }}</span>
            <img src="@/assets/img/orderdetail/arrow-right.png" />
            <span>{{ detailData.receiverProvince }}</span>
          </div>
          <div class="title-right">
            {{ detailData.logisticsNodeName }}
          </div>
        </div>

        <div class="detailInfo detail-border">
          <div class="detail-title">
            <p class="detail-title-text">基本信息</p>
            <van-icon
              :name="require('@/assets/img/edit.png')"
              color="#F18D00"
              v-show="changeFlag"
              @click="jumpToPage('/change/base')"
            />
          </div>
          <p class="detail-item">
            <span class="item-left">客户名称：</span>
            <span class="item-right">{{ detailData.kaUserName }}</span>
          </p>
          <p class="detail-item">
            <span class="item-left">订单号：</span>
            <span class="item-right">{{ detailData.orderNumber }}</span>
          </p>
          <p class="detail-item">
            <span class="item-left">内部订单号：</span>
            <span class="item-right">{{ detailData.trackingNumber }}</span>
          </p>
          <p class="detail-item">
            <span class="item-left">付款方式：</span>
            <span class="item-right">{{
              detailData.payment | paymentFilter
            }}</span>
          </p>
          <p class="detail-item">
            <span class="item-left">期望上门时间：</span>
            <span
              class="item-right"
              v-if="
                detailData.feeInformationVO &&
                detailData.feeInformationVO.kaPickup != 0
              "
            >
              {{ detailData.appointmentStart | formatTime(0, 16) }} -
              {{ detailData.appointmentEnd | formatTime(11, 16) }}</span
            >
            <span class="item-right" v-else> - -</span>
          </p>
          <p class="detail-item">
            <span class="item-left">预计到达时间：</span>
            <span class="item-right">{{
              detailData.etaTime | formatTime(0, 10)
            }}</span>
          </p>
          <!-- <p class="detail-item">
            <span class="item-left">短信配置：</span>
            <span class="item-right">
              <div>
                下单短信:{{
                  detailData.orderSmsStatus == 0
                    ? "不发送"
                    : detailData.orderSmsStatus == 1
                    ? "仅发送发货人"
                    : detailData.orderSmsStatus == 2
                    ? "仅发送收货人"
                    : detailData.orderSmsStatus == 3
                    ? "发送发货人和收货人"
                    : "--"
                }}
              </div>
              <div>
                提货短信:{{
                  detailData.pickSmsStatus == 0
                    ? "不发送"
                    : detailData.pickSmsStatus == 1
                    ? "仅发送发货人"
                    : detailData.pickSmsStatus == 2
                    ? "仅发送收货人"
                    : detailData.pickSmsStatus == 3
                    ? "发送发货人和收货人"
                    : "--"
                }}
              </div>
              <div>
                签收短信:{{
                  detailData.signSmsStatus == 0
                    ? "不发送"
                    : detailData.signSmsStatus == 1
                    ? "仅发送发货人"
                    : detailData.signSmsStatus == 2
                    ? "仅发送收货人"
                    : detailData.signSmsStatus == 3
                    ? "发送发货人和收货人"
                    : "--"
                }}
              </div>
            </span>
          </p> -->
          <p class="detail-item">
            <span class="item-left">疫情物资：</span>
            <span class="item-right">{{
              detailData.ncpType | ncpTypeFilter
            }}</span>
          </p>
          <p class="detail-item">
            <span class="item-left">订单备注：</span>
            <span class="item-right">{{ detailData.orderRemarks }}</span>
          </p>
        </div>

        <div
          class="detailInfo detail-border detail-radius"
          v-if="detailData.feeInformationVO"
        >
          <div class="detail-title">
            <p class="detail-title-text">费用明细</p>
            <van-icon
              :name="require('@/assets/img/edit.png')"
              color="#F18D00"
              v-show="changeFlag"
              @click="jumpToPage('/change/detail')"
            />
          </div>
          <p class="detail-item">
            <span class="item-left">提货费：</span>
            <span class="item-right">{{
              detailData.feeInformationVO.kaPickup != 0 ||
              detailData.feeInformationVO.pickupReceivable
                ? `¥ ${detailData.feeInformationVO.pickupReceivable}`
                : "无需提货"
            }}</span>
          </p>
          <p class="detail-item">
            <span class="item-left">送货费：</span>
            <span class="item-right">{{
              detailData.feeInformationVO.kaDelivery != 0 ||
              detailData.feeInformationVO.deliveryReceivable
                ? `¥ ${detailData.feeInformationVO.deliveryReceivable}`
                : "无需送货"
            }}</span>
          </p>
          <p class="detail-item">
            <span class="item-left">干线运输应收：</span>
            <span class="item-right"
              >¥ {{ detailData.feeInformationVO.downFreight }}</span
            >
          </p>
          <p class="detail-item">
            <span class="item-left">保费应收：</span>
            <span class="item-right"
              >¥ {{ detailData.feeInformationVO.kaInsuredPrice }} (保值{{
                detailData.feeInformationVO.kaGoodValues
              }}元)</span
            >
          </p>
          <p class="detail-item">
            <span class="item-left">优惠费用：</span>
            <span class="item-right"
              >¥ {{ detailData.feeInformationVO.Recduce }}</span
            >
          </p>
          <p class="detail-item">
            <span class="item-left">调整金额：</span>
            <span class="item-right"
              >¥ {{ detailData.feeInformationVO.kaAdAmount }}</span
            >
          </p>
          <van-divider />
          <p class="detail-item">
            <span class="item-left">合计应收：</span>
            <span class="item-right colorNum"
              >¥ {{ detailData.feeInformationVO.faCarPrice }}</span
            >
          </p>
          <p class="detail-item">
            <span class="item-left">实际已收：</span>
            <span class="item-right colorNumRed"
              >¥ {{ detailData.actualReceived }}</span
            >
          </p>
        </div>

        <div
          class="detailInfo detail-border detail-radius"
          v-if="detailData.goodsDetail"
        >
          <div class="detail-title">
            <p class="detail-title-text">货物信息</p>
            <van-icon
              :name="require('@/assets/img/edit.png')"
              color="#F18D00"
              v-show="changeFlag"
              @click="jumpToPage('/change/goods')"
            />
          </div>
          <div
            v-for="(good, index) in detailData.goodsDetail.goodsInfo"
            :key="index"
          >
            <p class="detail-item">
              <span class="item-left">货物名称：</span>
              <span class="item-right">{{ good.goodsName }}</span>
            </p>
            <p class="detail-item">
              <span class="item-left">件数：</span>
              <span class="item-right">{{ good.goodsNum ? good.goodsNum  : 0}}</span>
            </p>
            <p class="detail-item">
              <span class="item-left">重量：</span>
              <span class="item-right">{{ good.goodsWeight?good.goodsWeight: 0 }}kg</span>
            </p>
            <p class="detail-item">
              <span class="item-left">体积：</span>
              <span class="item-right">{{ good.goodsVolume? good.goodsVolume:0}}m³</span>
            </p>
            <p class="detail-item">
              <span class="item-left">货物特性：</span>
              <span class="item-right"
                >{{ good.presurable | presurableFilter }}
                {{ good.fragile | fragileFilter }}</span
              >
            </p>
            <van-divider
              v-if="index != detailData.goodsDetail.goodsInfo.length - 1"
            />
          </div>
          <van-divider />
          <p class="detail-item">
            <span class="item-left">总计：</span>
            <span class="item-right colorNum"
              >{{ detailData.goodsDetail.goodsNum }}件 -
              {{ detailData.goodsDetail.goodsWeight }}kg -
              {{ detailData.goodsDetail.goodsVolume }}m³</span
            >
          </p>
        </div>

        <div class="detailInfo detail-border detail-radius">
          <div class="detail-title">
            <p class="detail-title-text">地址信息</p>
            <van-icon
              :name="require('@/assets/img/edit.png')"
              color="#F18D00"
              v-show="changeFlag"
              @click="jumpToPage('/change/address')"
            />
          </div>
          <p class="detail-item">
            <span class="item-left">发货人：</span>
            <span class="item-right">{{ detailData.senderName }}</span>
          </p>
          <p class="detail-item">
            <span class="item-left">联系方式：</span>
            <span class="item-right">{{ detailData.senderTel }}</span>
          </p>
          <p class="detail-item">
            <span class="item-left">发货地址：</span>
            <span class="item-right">{{ detailData.senderAddress }}</span>
          </p>
          <van-divider />
          <div v-for="(item, index) in detailData.stopOverList" :key="index">
            <p class="detail-item">
              <span class="item-left">经停联系人：</span>
              <span class="item-right">{{ item.shrpPeopleName }}</span>
            </p>
            <p class="detail-item">
              <span class="item-left">联系方式：</span>
              <span class="item-right">{{ item.shrpPeopleTel }}</span>
            </p>
            <p class="detail-item">
              <span class="item-left">经停地址</span>
              <span class="item-right"
                >{{ item.shrpProvinceName }}{{ item.shrpCityName
                }}{{ item.shrpAreaName }}{{ item.shrpDes }}</span
              >
            </p>
            <p class="detail-item">
              <span class="item-left">货量</span>
              <span class="item-right">{{
                item.kaGoodTypeSumInfo
                  ? `${item.kaGoodTypeSumInfo.kaQuantity}件-${item.kaGoodTypeSumInfo.kaWeightKg}kg-${item.kaGoodTypeSumInfo.kaVolume}m³`
                  : "--"
              }}</span>
            </p>
            <van-divider />
          </div>
          <p class="detail-item">
            <span class="item-left">收货人：</span>
            <span class="item-right">{{ detailData.receiverName }}</span>
          </p>
          <p class="detail-item">
            <span class="item-left">联系方式：</span>
            <span class="item-right">{{ detailData.receiverTel }}</span>
          </p>
          <p class="detail-item">
            <span class="item-left">收货地址：</span>
            <span class="item-right">{{ detailData.receiverAddress }}</span>
          </p>
        </div>
        <!-- <div class="detailInfo detail-radius"
             v-if="detailData.feeInformationVO">
          <div class="detail-title">
            <p class="detail-title-text">承运信息</p>
            <van-icon :name="require('@/assets/img/edit.png')"
                      color="#F18D00"
                      v-show="changeFlag"
                      @click="jumpToPage('/details')" />
          </div>
          <p class="detail-item">
            <span class="item-left">干线承运商：</span>
            <span class="item-right">{{detailData.feeInformationVO.kaCarrierName?detailData.feeInformationVO.kaCarrierName:'--'}}</span>
          </p>
          <p class="detail-item">
            <span class="item-left">干线运输应付：</span>
            <span class="item-right">{{detailData.feeInformationVO.kaCarrierName?`¥ ${detailData.feeInformationVO.kaCarrierPrice}`:'--'}}</span>
          </p>
          <p class="detail-item">
            <span class="item-left">提货承运商：</span>
            <span class="item-right">{{detailData.feeInformationVO.kaCarrierName?detailData.feeInformationVO.pickupCarrierName:'--'}}</span>
          </p>
          <p class="detail-item"
             v-if="detailData.feeInformationVO.pickupCarrierName!=='短驳'">
            <span class="item-left">提货费：</span>
            <span class="item-right">{{detailData.feeInformationVO.kaCarrierName?`¥ ${detailData.feeInformationVO.pickupPayment}`:'--'}}</span>
          </p>
          <p class="detail-item">
            <span class="item-left">送货承运商：</span>
            <span class="item-right">{{detailData.feeInformationVO.kaCarrierName?detailData.feeInformationVO.deliverName:'--'}}</span>
          </p>
          <p class="detail-item"
             v-if="detailData.feeInformationVO.deliverName!=='短驳'">
            <span class="item-left">送货费：</span>
            <span class="item-right">{{detailData.feeInformationVO.kaCarrierName?`¥ ${detailData.feeInformationVO.deliveryPayment}`:'--'}}</span>
          </p>
          <van-divider />
          <p class="detail-item">
            <span class="item-left">费用合计：</span>
            <span class="item-right colorNum">{{detailData.feeInformationVO.kaCarrierName?`¥ ${detailData.feeInformationVO.freightPay}`:'--'}}</span>
          </p>
        </div> -->
      </div>
      <!-- <div class="footer"
           v-if="detailData.logisticsNodeName!='已取消'">
        <div class="btn-wrap">
          <div class="btn-left"
               @click="handelChangeOrder"
               v-show="detailData.pushPlatFrom!=0&&detailData.pushPlatFrom!=null&&detailData.orderStatusBack<10">
            <span>修改订单</span>
          </div>


          <div class="btn-right"
               @click="handelSure(orderId)"
               v-show="detailData.pushPlatFrom==0||detailData.pushPlatFrom==null">
            <span>确认承运</span>
          </div>
          <div class="btn-right" @click="pay(good)" v-if="detailData.NoticeStatus=='待通知' && detailData.PushPlaformStr=='已承运'">
            <span>通知支付</span>
          </div>
          
          <div class="btn-error"
               @click="handelError"
               v-show="detailData.isModify==1">
            <span>异常调整</span>
          </div>
        </div>
      </div> -->
    </div>
  </section>
</template>

<script>
import { orderDetail } from "@/api/order";
export default {
  name: "orderdetail",
  data() {
    return {
      detailData: {},
      orderId: "",
      changeFlag: false,
      disSelectLottery: false,
      userContractId: "",
    };
  },
  created() {
    this.orderId = this.$route.query.orderId;
    window.scrollTo(0, 0);
    let isEdit = this.$route.query.isEdit;

    if (isEdit == 1) {
      this.changeFlag = true;
    }
    if (this.orderId) {
      this.getOrderDetail();
    } else {
      this.$toast.fail("订单不存在");
    }
    sessionStorage.clear();
  },
  watch: {},
  methods: {
    getOrderDetail() {
      orderDetail(this.orderId).then((res) => {
        this.detailData = res.data;
        this.userContractId = res.data.userContractId
        console.log(this.detailData);
      });
    },
    jumpToPage(path) {
      this.$router.push({
        path: path,
        query: {
          orderId: this.orderId,
          userContractId: this.userContractId
        },
      });
    },
    handelChangeOrder() {
      this.changeFlag = !this.changeFlag;
      console.log("handelChangeOrder");
    },
    handelSure(val) {
      this.$router.push({
        path: "/details",
        query: { orderId: val,
        userContractId: this.userContractId },
      });
    },
    handelError() {
      this.$router.push({
        path: "/adjust",
        query: {
          orderId: this.orderId,
          userContractId: this.userContractId
        },
      });
      console.log("handelError");
    },
    onClickLeft() {
      this.$router.back();
    },
    onClickRight() {
      let url = window.location.host;

      let index = url.indexOf("pre");

      if (index <= -1) {
        window.location.href = "https://ka.lecarlink.com/index.aspx";
      } else {
        window.location.href = "https://ka-pre.lecarlink.com/index.aspx";
      }
    },
  },
  components: {
    // NavBar
  },
  filters: {},
};
</script>

<style scoped lang='scss'>
.container {
  background: #f8f8f8;
  padding: 56px 15px 75px 15px;
  font-size: 16px;

  .sub {
    background: #ffffff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 15px;
      background: #fef7ee;
      color: #333;
      .title-left {
        font-weight: 500;
        display: flex;
        align-items: center;
        img {
          width: 19px;
          height: 5px;
          margin: 0 5px;
        }
      }
      .title-right {
        color: #f18d00;
        font-size: 17px;
        font-weight: 600;
      }
    }
    .detailInfo {
      padding: 10px 15px;
      position: relative;

      .detail-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 10px 0;
        .detail-title-text {
          color: #333;
          text-align: left;
          font-weight: 500;
        }
      }
      .detail-item {
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        margin: 10px 0;
        .item-left {
          flex: 0 0 auto;
          margin-right: 10px;
          color: #999;
        }
        .item-right {
          color: #333;
          text-align: right;
        }
        .colorNum {
          color: #f18d00;
          font-weight: 500;
        }
        .colorNumRed {
          color: #ff6540;
          font-weight: 500;
        }
      }
    }
    .detail-radius:after {
      content: "";
      position: absolute;
      top: -10px;
      right: -10px;
      background: #f8f8f8;
      width: 20px;
      height: 20px;
      border-radius: 50%;
    }
    .detail-radius:before {
      content: "";
      position: absolute;
      top: -10px;
      left: -10px;
      background: #f8f8f8;
      width: 20px;
      height: 20px;
      border-radius: 50%;
    }
    .detail-border {
      border-bottom: 2px dashed #cccccc;
    }
  }
}
.isbottom {
  padding-bottom: 16px;
}
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  text-align: center;
  .btn-wrap {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn-left {
      background: #fdf3e4;
      border: 1px solid #f18d00;
      border-radius: 2px;
      color: #f18d00;
      font-size: 18px;
      width: 100%;
      height: 44px;
      line-height: 44px;
      box-sizing: border-box;
    }
    .btn-right {
      width: 47%;
      height: 44px;
      line-height: 44px;
      font-size: 18px;
      background: #f18d00;
      border: 1px solid #f18d00;
      box-sizing: border-box;
      border-radius: 2px;
      color: #fff;
    }
    .btn-error {
      width: 47%;
      height: 44px;
      line-height: 44px;
      font-size: 18px;
      background: #ff6540;
      border: 1px solid #ff6540;
      box-sizing: border-box;
      border-radius: 2px;
      color: #fff;
    }
  }
}
</style>
